<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            background: #dfdf;
        }

        .content {
            width: 100%;
            padding: 10px;
        }


        .box-content1 {
            width: 800px;
            height: 100px;
            display: flex;
            background: antiquewhite;
        }

        .box-style1 {
            width: 100px;
            height: 100px;
            background: aquamarine;
        }


        .box-content2 {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            background: antiquewhite;
        }

        .box-style2 {
            width: 300px;
            height: 300px;
            margin: 10px;
            background: aquamarine;
        }

        .box {
            width: 100px;
            height: 100px;
            background: rebeccapurple;
        }

        .box1 {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>
    <div class="content">
        <!-- 
            1.大盒子里面三个小盒子使用弹性布局的方式让第一个第二个靠左，第三个盒子靠右； 
            解决方案：在最后一个盒子上面添加属性：" margin-left: auto; ";
            反之第一个盒子靠左，其他盒子靠右，在第一个盒子添加属性：" margin-right: auto; " 即可;
        -->
        <h3>第一题</h3>
        <p>大盒子里面三个小盒子使用弹性布局的方式让第一个第二个靠左，第三个盒子靠右</p>
        <p>解决思路：在最后一个盒子上面添加属性：" margin-left: auto; ";</p>
        <div class="box-content1">
            <div class="box-style1"></div>
            <div class="box-style1"></div>
            <div class="box-style1" style="margin-left: auto;"></div>
        </div>

        <!-- 
            2.子盒子根据父盒子垂直水平居中
         -->
        <h3>第二题</h3>
        <p>子盒子根据父盒子垂直水平居中</p>
        <p>解决思路：";</p>
        <div class="box-content2">
            <!-- 父盒子大小不确定的情况下 -->
            <!-- 
                1.使用定位 + transform 
                解决思路：①：父盒子相对定位: position: relative;
                         ②：子盒子绝对定位: position: absolute;
                         ③：子盒子设置：top: 50%, left: 50%;
                         ④：子盒子设置：transform: translate(-50%, -50%);
            -->
            <div class="box-style2" style="position: relative;">
                <div class="box"></div>
            </div>
            <!-- 
                2.使用弹性盒子
                解决思路：设置父盒子css属性如下；
                         ①: display: flex;  设置弹性盒子
                         ②：justify-content: center;  水平居中
                         ③：align-items: center;  垂直居中
             -->
            
            <div class="box-style2">
                <div class="box"></div>
            </div>
            <div class="box-style2">
                <div class="box"></div>
            </div>
            <div class="box-style2">
                <div class="box"></div>
            </div>
            <div class="box-style2">
                <div class="box"></div>
            </div>
        </div>
    </div>
    
</body>
<script>
    // 事件代理

    // 微任务 - 宏任务
    let i = 0  
    while(i) {
        i++
        console.log(i)
    }
</script>

</html>